<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		body{
			margin: 0px;
			min-height: 100vh;
			display: flex;
			flex-direction: column;
		}
			header,footer{
				height: 80px;
				background-color: #FF7F50;
			}
			
			header{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
			header>a{
				background-color: blueviolet;
				height: 100%;
				display: inline-flex;
				align-items: center;
				text-decoration: none;
			}
			
			#main{
				flex-grow: 1;
				display: flex;
				align-items: stretch;
			}
			
			#left,#right{
				width: 120px;
				background-color: #7FFFD4;
				flex-shrink: 0;
			}
			
			#content{
				flex-grow: 1;
			}
		</style>
	</head>
	<body>
		<header>
			<a href="#">上一页</a>
			<span>标题</span>
			<a href="#">下一页</a>
		</header>
		<div id="main">
			<div id="left">左侧</div>
			<div id="content">得
　　
　　果然，不到一个月，茉莉就以天气渐渐变冷容易感冒为由，结束了晨读的日子。

　　天下难事，必作于易；天下大事，必作于细。努
			</div>
			<div id="right">右侧</div>
		</div>
		<footer>底部</footer>
	</body>
</html>
